import React, { useEffect, useState } from 'react'
import style from './style.less'
import SRC from '@/images/supply/buy.png'
import Wu from '@/images/supply/wu.png'
import { DotLoading, Ellipsis, InfiniteScroll, PullToRefresh } from 'antd-mobile'
import Invoice from '@/images/supply/invoice.png'
import Item from './.item';
import { history } from 'umi';
import { CountDown } from '@/components/count-down'
import { SupplyListInter, getByPurchaserId } from '@/services/Publish'
import moment from 'moment';
export interface dataDto {
    supplierId: number,
    areaCode: string;
    id: number;
    commodityName: string;
    shopping: string;
    menuName: string;
    expectedPrice: number;
    expectedAmount: number;
    totalMoney: number;
    imageUrl: string;
    updateTime: string;
    purchaserPhone: string;
    purchaserName: string;
    negotiationState: string;
    originPlace: string;
    shipmentPlace: string;
    createTime: string;
    supplierName: string;
    supplierPhone: string;
    shippingAddress: string;
    variety: string;
}
interface Props {
    State?: string[]
}
export const InfiniteScrollContent = ({ hasMore }: { hasMore?: boolean }) => {
    return (
        <>
            {hasMore ? (
                <>
                    <span>加载中</span>
                    <DotLoading />
                </>
            ) : (
                <span>--- 我是有底线的 ---</span>
            )}
        </>
    )
}
export default (props: Props) => {
    const { State } = props
    const [data, setData] = useState<dataDto[]>([]);
    const [totalCount, setTotalCount] = useState<number>(0)
    const [pageData, setPageData] = useState<SupplyListInter>({ currentPage: 1, pageSize: 5 });
    const [hasMore, setHasMore] = useState(true)

    const formatter = new Intl.NumberFormat('zh-CN', {
        style: 'currency',
        currency: 'CNY',
        minimumFractionDigits: 2,
        maximumFractionDigits: 2,
    })

    const getData = async () => {
        const res = await getByPurchaserId({ ...pageData, userId: 1, negotiationStateList: State })
        setData(res.list)
        setTotalCount(res.totalCount)
    }

    useEffect(() => {
        getData()
    }, [])

    const loadMore = async () => {
        if (pageData.pageSize <= totalCount) {
            setPageData({ ...pageData, pageSize: pageData.pageSize + 5 });
            const res = await getByPurchaserId({ ...pageData, pageSize: pageData.pageSize + 5, userId: 1, negotiationStateList: State })
            setData(res.list)
        } else {
            setHasMore(false)
        }

    };


    return (
        <div className={style.page}>
            <div className={style['page-list']}>
                {totalCount === 0 ? (
                    <div className={style.no}>-暂无数据-</div>
                ) : (
                    <div>
                        <PullToRefresh
                            onRefresh={getData}
                            disabled={true}
                        >
                            {data?.map((item) => (
                                <div
                                    key={item.id}
                                    className={style['list-item']}
                                >
                                    <div
                                        onClick={() => {
                                            history.push(`/supply/order/list/confirm?id=${item.id}`)
                                        }}
                                    >
                                        <div className={style['con-tt']}>
                                            <img src={SRC} alt='SRC' />
                                            <span>{item?.shopping}四级化肥</span>
                                            <span className={style.business}>企业客户</span>
                                            {item?.negotiationState === 'SUCCESS' || item?.negotiationState === 'FAILED' ? (
                                                <div className={style.time}>{moment(item?.updateTime).format('YYYY-MM-DD')}</div>
                                            ) :
                                                (
                                                    <div>
                                                        {item?.negotiationState === 'PURCHASER' ? (
                                                            <span className={style.status}>待确认</span>
                                                        ):(
                                                            <span className={style['status-a']}>待买家确认</span>
                                                        )}
                                                    </div>

                                                )
                                            }

                                        </div>
                                        <div className={style.con}>
                                            <div className={style['con-left']}>
                                                {item?.imageUrl ? (
                                                    <img src={item?.imageUrl} alt="商品图片" />
                                                ) : <img src={Wu} alt='无' />}
                                            </div>
                                            <div className={style['con-right']}>
                                                <div className={style.name}>
                                                    <Ellipsis direction='end' content={item?.commodityName} />
                                                    <span>{item?.expectedPrice}元/斤</span>
                                                </div>
                                                <div className={style.name}>
                                                    <span className={style.type}>{item?.variety}种类</span>
                                                    <span className={style.weight}>×{item?.expectedAmount}斤</span>
                                                </div>
                                            </div>
                                        </div>
                                        {item?.negotiationState === 'PURCHASER' || item?.negotiationState === 'SUPPLIER' ? (
                                            <div className={style.overlay}>
                                                <div className={style.content}>
                                                    最终确认时间还剩
                                                    <span className={style.time}>
                                                        <CountDown countDown={86400} />
                                                    </span>
                                                </div>
                                            </div>
                                        ) : null}

                                        <div className={style.total}>
                                            {item?.negotiationState === 'SUCCESS' ? (
                                                <span className={style.invoice}>
                                                    <img src={Invoice} alt='票' />
                                                    不支持在线开票
                                                </span>
                                            )
                                                : null}
                                            <span>合计金额</span>
                                            <span className={style.money}>
                                                {formatter.format(Number(item?.totalMoney))}
                                            </span>
                                        </div>
                                    </div>
                                    <div>
                                        <Item
                                            data={{
                                                supplierId: item?.id,
                                                supplierName: item?.supplierName,
                                                supplierPhone: item?.supplierPhone,
                                                negotiationStateList: State || [],
                                            }}
                                            callback={function (): void {
                                                throw new Error('Function not implemented.')
                                            }} />
                                    </div>
                                </div>
                            ))}
                        </PullToRefresh>
                        {totalCount &&
                            <InfiniteScroll loadMore={loadMore} hasMore={hasMore}>
                                <InfiniteScrollContent hasMore={hasMore} />
                            </InfiniteScroll>
                        }
                    </div>
                )}
            </div>

        </div>
    )
}
